<section ng-init="$ctrl.init()">
  <div ng-repeat="msg in $ctrl.messages">
    <ul class="row">
      <li
        class="col-sm-12"
        ng-class="{ 'message-right': msg.connection.id == $ctrl.user.connection.id , 
                'message-left': msg.connection.id != $ctrl.user.connection.id }"
      >
        <div class="message-avatar">
          <img class="avatar" ng-src="{{msg.connection.avatar}}" />
        </div>
        <div class="name">{{msg.connection.name}}</div>
        <div class="message-text">{{msg.content}}</div>
        <div class="message-hour">
          {{msg.createdDate | utcToLocal:"dd.MM.yyyy hh:mm:ss"}}<span
            class="ion-android-done-all"
          ></span>
        </div>
      </li>
    </ul>
  </div>
  <div class="row">
    <div class="col-md-8">
      <textarea
        id="message"
        class="msgContent"
        minlength="1"
        placeholder="message"
        ng-enter="$ctrl.sendMessage()"
        ng-model="$ctrl.message.content"
      ></textarea>
      <button class="sendMsgBtn" ng-click="$ctrl.sendMessage()">
        <i class="fas fa-paper-plane"></i>
      </button>
    </div>
    <div class="col-md-4">
      <ul>
        <li ng-repeat="m in $ctrl.members">
          <img imageonload ng-src="{{m.avatar}}" />
          <span ng-bind="m.name"></span>
        </li>
      </ul>
    </div>
  </div>
</section>
<!-- /.content -->
